{% extends 'Base.html' %}
{% load side %}
{% load staticfiles %}
{% load compress %}
{% block seo %}
    <title>{{ article.title |safe }}|www.bianbingdang.com</title>
    <meta name="keywords" content="变饼档,{{ article.tag }}">
    <meta name="description" content="{{ article.summary }}|www.bianbingdang.com"/>
{% endblock %}
{% block main %}
    <div class="layui-col-md8" style="background-color: white;margin-top: 3px;margin-bottom: 5px;padding: 0 10px">
        <span class="layui-breadcrumb" lay-separator="/">
          <a href="{% url 'article-index-view' %}">主页</a>
          <a href="{{ path }}">{{ article.title |safe }}</a>
          <a>正文</a>
        </span>
        <h2 style="margin: 5px auto">
            {{ article.title |safe }}
        </h2>
        <div style="color: darkgray">
            <span><small>作者：{{ article.username }}</small></span>
            &nbsp;
            <span><small>更新时间：{{ article.update_time }}</small></span>
            &nbsp;&nbsp
        </div>
        <hr/>
        {% include 'ads/detail_top.html' %}
        {% if article.md %}
            <link rel="stylesheet" href="/static/editor.md-master/css/md.css"/>
            {% if user.is_authenticated %}
                <div class="wmd-wrapper" id="article_content"
                     style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 1px">
                    <textarea style="display:none">{{ article.content }}</textarea>
                </div>
            {% else %}
                <div class="wmd-wrapper" oncopy="javascript:alert('登录可复制');{return false}" id="article_content"
                     style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 1px">
                    <textarea style="display:none">{{ article.content }}</textarea>
                </div>
            {% endif %}
        {% else %}
            {% if user.is_authenticated %}
                <div id="article_content" style="word-wrap:break-word ">
                    {{ article.content | safe }}
                </div>
            {% else %}
                <div oncopy="javascript:alert('登录可复制');return false" id="article_content"
                     style="word-wrap:break-word">
                    {{ article.content | safe }}
                </div>
            {% endif %}
        {% endif %}

        <p style="margin: 2rem auto"></p>
        {% include 'comments.html' %}
    </div>
    <style>
        @media screen and (max-width: 768px) {
            #bcm-fixbar {
                display: none;
            }
        }
    </style>
    <script src="{% static 'js/jquery.slim.min.js' %}"></script>
    {% if article.md %}
        <!--引入md样式文件-->
        <link rel="stylesheet" href="/static/editor.md-master/css/editormd.preview.min.css"/>

        <!--引入md js文件-->
        <script src="/static/editor.md-master/lib/prettify.min.js"></script>
        <script src="/static/editor.md-master/lib/marked.min.js"></script>
        {% compress js %}
            <script src="/static/editor.md-master/editormd.js"></script>
        {% endcompress %}
        <script>
          layui.use(['layer'], function () {
            let index = layer.load(0, { shade: [0.9, '#fff'] })
            editormd.markdownToHTML('article_content', {
              emoji: true,
              taskList: true,
            })
            setTimeout(function () {
              layer.close(index)
            }, 300)
          })
        </script>
    {% else %}
        <link href="{% static 'js/lib/prism/prism-okaidia.css' %}" rel="stylesheet">
        <script src="{% static 'js/lib/prism/prism.min.js' %}"></script>
    {% endif %}
{% endblock %}
{% block side %}
    <div class="layui-col-md4">
        {# 推荐阅读 #}
        {% recommends %}
        {#    目录#}
        {% include 'side/doc_title.html' %}
        {% include 'side/about.html' %}
    </div>
{% endblock %}